<template>
  <div
    class=""
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <el-row>
      <el-col :span="24">
        <aps-form
          :config="apsForm.formConfig"
          :model="apsForm.formData"
          :formRef="apsForm.formRef"
          :labelWidth="apsForm.labelWidth"
          ref="form"
        ></aps-form>
      </el-col>
    </el-row>
    <!-- <extremumLinechart :chartData="chartData" style="margin-bottom: 20px" /> -->
    <lb-table
      ref="table"
      :column="tableData.column"
      height="680"
      :data="tableData.data"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
    >
    </lb-table>
  </div>
</template>

<script>
import extremumLinechart from "@/views/statistics/energy/components/behaviorC/extremumLinechart.vue";
import { getHourExtremumList } from "@/api/iot/extremum.js";
import { dealElectricity } from "@/utils/index.js";
import CascaderSelect from "@/components/Select/CascaderSelect";
export default {
  components: {
    extremumLinechart,
    CascaderSelect,
  },
  data() {
    return {
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            yearMonthDate: {
              label: "时间日期:",
              typeName: "el-date-picker",
              type: "date",
              "value-format": "yyyy-MM-dd",
              placeholder: "请选择时间日期",
            },
            deptId: {
              label: "用能单位:",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let valNum = that.$refs?.form?.getFieldsValue().deptId;
                return (
                  <div>
                    <CascaderSelect
                      value={valNum}
                      values={valNum}
                      varient={"energy"}
                      size={"small"}
                      placeholder={"请选择用能单位"}
                      filterable={true}
                      onInput={that.handlerLiandong}
                    ></CascaderSelect>
                  </div>
                );
              },
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      chartData: {
        xAxisData: [0],
        legendData: [],
        dataArr: [
          {
            name: "",
            yAxisIndex: 0,
            data: [0],
            type: "line",
            smooth: true,
            symbol: "rect",
          },
        ],
      },
      tableData: {
        column: [
          {
            prop: "time",
            label: "时间点",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "maxEnergy",
            label: "能耗最高值（kwh）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "oyoybmaxEnergy",
            label: "最高值同比（%）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "minEnergy",
            label: "能耗最低值（kwh）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "oyoybminEnergy",
            label: "最低值同比（%）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "avgEnergy",
            label: "能耗平均值（kwh）",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "oyoybavgEnergy",
            label: "均值同比（%）",
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {},
  mounted() {
    this.getLocaldate();
    this.handlerSearchDetail();
  },
  methods: {
    // 联动
    handlerLiandong(value) {
      let result;
      if (value && value.length > 0) {
        result = value[value.length - 1];
      } else {
        result = null;
      }
      this.$refs?.form?.setFieldValue("deptId", result);
    },
    // 获取今天的日期
    getLocaldate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var today = year + "-" + month + "-" + day;
      this.$refs?.form?.setFieldValue("yearMonthDate", today);
      // this.$refs?.form?.setFieldValue("yearMonthDate", "2022-11-09");
    },
    handlerSearchDetail() {
      this.initData();
    },
    initData() {
      let queryParams = this.$refs?.form?.getFieldsValue();
      getHourExtremumList(queryParams)
        .then((res) => {
          // console.log(res, "data");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let data = res?.data ?? [];
          this.listDatadeal(data);
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200701");
        });
    },
    listDatadeal(arr) {
      let tableData = [];
      if (arr.length > 0) {
        arr.map((item) => {
          let maxEnergy = item?.maxEnergy ?? 0; // 能耗最高值
          let lastYearAvgEnergy = item?.lastYearAvgEnergy ?? 0; // 去年能耗平均值
          let minEnergy = item?.minEnergy ?? 0; // 能耗最低值
          let avgEnergy = item?.avgEnergy ?? 0; // 能耗平均值
          let oyoybmaxEnergy =
            lastYearAvgEnergy == 0
              ? 0
              : dealElectricity(maxEnergy / lastYearAvgEnergy, 1, 2); // 最高值同比
          let oyoybminEnergy =
            lastYearAvgEnergy == 0
              ? 0
              : dealElectricity(minEnergy / lastYearAvgEnergy, 1, 2); // 最低值同比
          let oyoybavgEnergy =
            lastYearAvgEnergy == 0
              ? 0
              : dealElectricity(avgEnergy / lastYearAvgEnergy, 1, 2); // 均值同比
          let time = item?.time + ":00";
          let obj = {
            time: time,
            maxEnergy: maxEnergy,
            oyoybmaxEnergy: oyoybmaxEnergy,
            minEnergy: minEnergy,
            oyoybminEnergy: oyoybminEnergy,
            avgEnergy: avgEnergy,
            oyoybavgEnergy: oyoybavgEnergy,
          };
          tableData.push(obj);
        });
      }
      this.tableData.data = tableData;
      this.getchartData(tableData);
    },
    getchartData(tableData) {
      if (tableData.length > 0) {
        let xArr = [];
        let dataArr = [
          {
            name: "能耗最高值",
            yAxisIndex: 0,
            data: [],
            type: "line",
            smooth: true,
            symbol: "rect",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kwh";
              },
            }, //circle、rect、roundRect、triangle
            // symbolSize: [8, 8]
          },
          {
            name: "能耗最低值",
            yAxisIndex: 0,
            data: [],
            type: "line",
            smooth: true,
            symbol: "rect",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kwh";
              },
            },
          },
          {
            name: "能耗平均值",
            yAxisIndex: 0,
            data: [],
            type: "line",
            smooth: true,
            symbol: "rect",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kwh";
              },
            },
          },
          {
            name: "最高值同比",
            yAxisIndex: 1,
            data: [],
            type: "line",
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
          },
          {
            name: "最低值同比",
            yAxisIndex: 1,
            data: [],
            type: "line",
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
          },
          {
            name: "均值同比",
            yAxisIndex: 1,
            data: [],
            type: "line",
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
          },
        ];
        let legendData = [
          "能耗最高值",
          "能耗最低值",
          "能耗平均值",
          "最高值同比",
          "最低值同比",
          "均值同比",
        ];
        tableData.map((item) => {
          xArr.push(item.time);
          dataArr[0].data.push(item.maxEnergy);
          dataArr[1].data.push(item.minEnergy);
          dataArr[2].data.push(item.avgEnergy);
          dataArr[3].data.push(item.oyoybmaxEnergy);
          dataArr[4].data.push(item.oyoybminEnergy);
          dataArr[5].data.push(item.oyoybavgEnergy);
        });
        this.chartData = {
          xAxisData: xArr,
          legendData: legendData,
          dataArr: dataArr,
        };
      } else {
        this.chartData = {
          xAxisData: [0],
          legendData: [],
          dataArr: [
            {
              name: "",
              yAxisIndex: 0,
              data: [0],
              type: "line",
              smooth: true,
              symbol: "rect",
            },
          ],
        };
      }
    },
    handleReset() {
      this.$refs?.form?.resetFields();
      this.getLocaldate();
      this.handlerSearchDetail();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
  },
};
</script>

<style lang="scss" scoped></style>
